<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="../css/cui.css" />
	<link rel="stylesheet" href="../css/cui-rel.css" />
	<link rel="stylesheet" href="../css/lib.css" />
	<link rel="stylesheet" href="../css/style.css" />
	<link rel="stylesheet" href="../css/style-rel.css" />
	<script src="../js/axios.min.js"></script>
	<style>
		body{
		  background-image: url(../images/a.png);
		  background-color: cadetblue;
		}
	  </style>
</head>
<body>
    <div id="bd">
		<div class="wp">
			<div class="loginBox">
				<form action="">
					<table>
						<caption>网易云商城账号注册</caption>
						<tr>
							<th><span class="ico-user"></span></th>
							<td><input type="text" placeholder="请输入6-12位字母开头的账户" id="username" >
							<span class="judge"></span></td>
						</tr>
						<tr>
							<th><span class="ico-key"></span></th>
							<td><input type="text" placeholder="请输入6-12位的密码" id="password" >
								<span class="judge"></span></td>
						</tr>
						<tr>
							<th></th>
							<td>
								<input type="submit" value="立即注册" class="btn1 ani" id="btn" >
								点击注册，表示同意 <a href="">会员条款</a> 和 <a href="">免责声明</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
	<!-- 页面跳转js -->
    <script>
        let ipts = document.querySelectorAll("input");
      ipts[2].onclick = function (evt) {
        //发起的注册请求--注册接口 需要什么参数  想法获取这些参数
        let username = ipts[0].value;
        let password = ipts[0].value;
        // 4-发起注册请求-注册成功-跳转登录
        let regAPI = "http://jx.xuzhixiang.top/ap/api/reg.php";
        let p = axios.get(regAPI, { params: { username: username, password } });
        p.then((r) => {
          //成功
          console.log(r.data);
          if (r.data.code == 0) {
            alert(r.data.msg);
          } else {
            alert(r.data.msg);
            //-注册成功-跳转登录
            location.href = "登录页面.html";
          }
        });
        evt.preventDefault();
      };
    </script>
<!-- 正则验证用户名，密码 -->
	<script>
		let inputs = document.querySelectorAll('input'),
    spans = document.querySelectorAll('.judge');

let  isUsername = false,
    inputValueNum = 0
inputs[0].onchange = function () {
    let reg1 = /^[a-z 1-9]+\w{4,11}$/
    let aa = inputs[0].value
    if (reg1.test(aa) === true) {
        spans[0].innerHTML = '合法'
        isUsername = true
    }
    if (reg1.test(aa) !== true) {
        spans[0].innerHTML = `用户账号不合法`
        btn.style.pointerEvents="none";
      alert("请输入正确的格式")
    }
    if (aa !== '') {
        inputValueNum = 1
    }
}
// 验证密码是否符合规范
let isPassword = false
inputs[1].onchange = function () {
    let reg1 = /^[A-Za-z0-9+]{4,12}$/
    let aa = inputs[1].value
    if (reg1.test(aa) === true) {
        spans[1].innerHTML = '正确'
        isPassword =true
    }
    if (reg1.test(aa) !== true) {
        spans[1].innerHTML = `密码必须是6-12位数字`
        btn.style.pointerEvents="none";
        alert("请输入正确的格式")
    }
    if (aa !== '') {
        inputValueNum = 2
    }
}
	</script>
</body>
</html>